<template>
	<div id="">
		<myheader><span style="position: absolute;left: 20px;top: 20px;" class="icon-angle-left" @click="$router.back()"></span>
			{{listname}}
		</myheader>
		<section class="rule">
			<div>分类<i class=" icon-angle-down"></i></div>
			<div>排序<i class=" icon-angle-down"></i></div>
			<div>筛选<i class=" icon-angle-down"></i></div>
		</section>
		<section id="content">
			<ul>
				<li v-for="s in listcon">
					<router-link :to="'/sell/' + s.id"><div class="shopLeft" :style="{backgroundImage: 'url(http://fuss10.elemecdn.com/' + jpeg(s.image_path) + ')'}"></div></router-link>
					<router-link :to="'/sell/' + s.id"><div class="shopCenter">
						<p><span>品牌</span>{{s.name}}</p>
						<p>月售{{s.float_minimum_order_amount}}单</p>
						<p>{{s.average_cost}}(配送费￥4/人)</p>
					</div></router-link>
					<div class="shopRight">
						<p v-show="s.is_premium">保</p>
						<p>{{s.distance}}m/<span>{{s.order_lead_time}}分钟</span></p>
					</div>
				</li>
			</ul>
		</section>
	</div>
</template>

<script type="text/javascript">
	import myheader from '../header'
	import axios from 'axios'
	export default{
		name:'selllist',
		data:function(){
			return{
				listname:{},
				listcon:{},
			}
		},
		components:{
			myheader
		},
		created:function(){			
			var id = this.$route.params.title
			var list = id.replace(/[^\u4e00-\u9fa5]/gi,"");  
			var num = id.replace(/[^0-9]/ig,""); 
			console.log(list)
			console.log(num)
			this.listname = list
			
			axios.get('https://mainsite-restapi.ele.me/shopping/restaurants?latitude=34.72856&longitude=113.75245&keyword=&offset=0&limit=20&extras[]=activities')
			.then(function(res){
				this.listcon = res.data	
			}.bind(this))
			.catch(function(error){
				console.log(error)
			})
		},
		methods:{
			jpeg:function(value){
  				var out 				
  				var result = value.substring(value.length-3)
  				if(result == 'peg'){
  					out = value + '.jpeg'
  				}else{
  					out = value + '.png'
  				}
  				var result1 = out.substring(0,1) + '/' + out.substring(1,3) + '/' + out.substring(3)
  				return result1
  			},
		}
	}
</script>

<style type="text/css" scoped="">
	/*排序*/
	.rule{}
	.rule div{float: left;width: 33.3%;height: 50px;border-bottom: 1px solid gainsboro;line-height: 50px;text-align: center;margin-bottom: 5px;}
	/*推荐商家*/
	#content{width: 100%;background: white;padding-left:5px ;}
	.shopLeft {width: 90px;height: 90px;background-size:100% ;}
	.shopCenter{width: 40vw;height: 90px;}
	.shopRight{width: 30vw;height: 90px;text-align: right;}
	#content li{width: 90%;display: flex;justify-content:center;margin-bottom:30px;}
	/*商家li 内部信息样式*/
	.shopCenter p:nth-of-type(1){font-size: 16px;font-family: '黑体';font-weight: 800;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.shopCenter p:nth-of-type(1) span{background: #ffd930;color: #52250a;font-size: 14px;width: 35px;display: inline-block;text-align: center;border-radius:5px ;margin: 0px 5px;}
	.shopCenter p:nth-of-type(2),.shopCenter p:nth-of-type(3){font-size: 14px;padding-left:10px ;color: #666666;}
	.shopRight p:nth-of-type(1){border: 1px solid #666666;color: #666666;display: inline-block;border-radius:5px ;height: 27px;width: 25px;text-align: center;}
	.shopRight p:nth-of-type(2){font-size: 12px;height:50px;line-height: 50px;color: #48acff;}
</style>